<template>
  <div class="wrapper">
    <div class="box">
      <el-form :rules="rules" :model="user">
        <el-form-item label="UserName" prop="username">
          <el-input style="width: 75%" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="PassWord" prop="password">
          <el-input style="width: 75%" v-model="user.password"></el-input>
        </el-form-item>
        <el-button type="primary" style="width: 100%" @click="login"
        >Login</el-button
      >
      </el-form>
      <div class="logo">
        <img src="@/assets/logo.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
import {login} from '@/axios/https'
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      user: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, massage: "Place Enter UserName", trigger: "blur" },
          //    { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: "UserName Length 3-5", trigger: "blur" },
        ],
        password: [
          { required: true, massage: "Place Enter PassWord", trigger: "blur" },
          { min: 3, max: 6, message: "PassWord Length 3-6", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getHeight();
    // 页面刷新调用
    window.addEventListener("resize", this.getHeight);
  },
  methods: {
    //   设置高度
    getHeight() {
      let html = document.documentElement || document.body;
      let vh = html.clientHeight;
      let wrapper = document.querySelector(".wrapper");
      wrapper.style.height = vh + "px";
    },
    // 登录
    async login() {
      const { data: res } = await login(this.user);
      console.log(res);
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      this.$message.success(res.meta.msg);
      sessionStorage.setItem("user", res.data.token);
      this.$router.push("/admin/home");
    },
  },
};
</script>
<style lang='sass' scoped>
.wrapper
    width: 100%
    background: #0088dd
    display: flex
    align-items: center
    justify-content: center
    .box
        position: relative
        width: 450px
        height: 300px
        text-align: center
        background: #fff
        padding: 20px
        box-shadow: 0 0 10px #fff
        border-radius: 10px
        .el-form
            margin-top: 100px
            .el-button
                margin-top: 10px
        .logo
            position: absolute
            top: -20%
            left: 36%
            width: 150px
            height: 150px
            border-radius: 50%
            background: rgba(250, 250, 250,.9)
            box-shadow: 0 0 10px #fff
            img
                height: 130px
                width: 130px
                border-radius: 50%
                background: #f0f0f0
                margin: 10px 10px
</style>